<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../css/api.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="../css/varieties.css">
  
</head>

<body>
    <div class="app" v-cloak>
        <div class="windHeight">
            <div class="f7-header">
                <div class="flex-x-s header ">
                    <div class="title">
                        {{detailOtherData.title}}
                    </div>
                </div>
            </div>
            <div class="varieties-detail">
                <!-- 轮播 -->
                <div class="varieties-swiper">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <template v-for="(item,index) in detailOtherData.banners">
                                <div v-if="item.type == 0" class="swiper-slide flex-x-c" @click="preview(index,detailOtherData.banners)" :key="index">
                                    <img :src="item.imageUrl" @click="toPreview(item.imageUrl)" alt="" >
                                </div>
                                <div v-else class="swiper-slide flex-x-c" :key="index">
                                    <div class="videoPlay main-img">
                                        <video  :id="'player'+index" controls preload="none"
                                            webkit-playsinline="true" playsinline="true" :poster="item.imageUrl" x5-playsinline>
                                            <source :src="item.videoId" type="video/mp4" />
                                        </video>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <van-image-preview v-model="preview" :images="imageUrls" :start-position="startPosition">
                    </van-image-preview>    
                </div>
                <div class="detail-container">
                    <!-- 详情介绍 -->
                    <div class="varieties-detail-rent">
                        <div class="rent-name">{{detailOtherData.title}}</div>
                        <div class="varieties-detail-subtitle">
                            {{handleTimeYMD(detailOtherData.publishTime)}}发布 | {{detailOtherData.hitNum}}浏览
                            <span class="varieties-detail-subtitle-tag">{{detailOtherData.type == 0 ? '售卖' : '出租'}}</span>
                        </div>
                    </div>
                    <div class="varieties-detail-main">
                        <div class="varieties-production-params">
                            <div class="varieties-param">
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">分类:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.className}}
                                    </div>
                                </div>
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">规格:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.model}}
                                    </div>
                                </div>
                            </div>
                            <div class="varieties-param">
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">数量:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.num}}
                                    </div>
                                </div>
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">价格:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.price}}
                                    </div>
                                </div>
                            </div>
                            <div class="varieties-param">
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">地区:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.privinceName}}{{detailOtherData.cityName}}{{detailOtherData.areaName}}
                                    </div>
                                </div>
                            </div>
                            <div class="varieties-param">
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">地址:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.address}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="varieties-box-line"></div>
                        <div class="varieties-desc-box">
                            <div class="varieties-desc-title">产品详情</div>
                            <div class="varieties-desc-content">{{detailOtherData.description ? detailOtherData.description:'暂无任何描述哦~'}}</div>
                        </div>
                        <div class="varieties-box-line"></div>
                    </div>
                    <div class="varieties-about-recommend">
                     <div class="varieties-desc-title">相关推荐</div>
                        <div class="varieties-recommend-container">
                            <div @click="gotoDetail(item)" class="varieties-recommend-item" v-for="(item,index) in listRecommends" :key="index">
                                 <div class="varieties-img-box">
                                     <img :src="item.imageUrl?item.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/item_img.png'" alt=""
                                            class="varieties-preview-img">
                                     <div class="varieties-img-btn" :class="[item.type == 0 ? 'orangeBac' : '']">{{item.type === 0 ? '售卖' : '出租'}}</div>
                                 </div>
                                <div class="varieties-recommend-center">
                                    <p class="varieties-recommend-name">{{item.title}}</p>
                                    <div class="varieties-recommend-info">
                                        <div class="varieties-info-item">规格: {{item.model}}</div>
                                    </div>
                                    <div class="varieties-recommend-other">
                                     <div class="varieties-other-tag">{{item.typeName }}</div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="varieties-nomore">-  没有更多了 -</div> -->
                        </div>
                    </div>
                </div>
                <div class="share-qrcode">
                   <div class="qrcode-icon">
                       <img src="https://www.tiexiemall.com/resource/img/mini.jpg" alt="">
                   </div>
                   <div class="share-link">铁蟹网</div>
               </div>
             </div>
        </div>
    </div>
    <script src="../script/flexible.js "></script>
    <script src="../script/vue.min.js "></script>
    <script src="../script/swiper.min.js"></script>
    <script src="../script/vant.min.js "></script>
    <script src="../script/common.js"></script>
    <script>
        var vm = new Vue({
                el: '.app',
                data:{
                    preview: false,
                    startPosition: 0,
                    imageUrls: [],
                    detailOtherData: {
                        id: 1,
                        userId: '',
                        inquiried: false, // 是否可询价
                        contactTels: '', // 联系电话
                        classId: '', // 用于相关推荐传的参数
                        banners: [],
                        title: '', // 标题
                        publishTime: '', // 发布日期
                        hitNum: '', // 浏览量
                        type: 0, // 0: 售卖 1： 出租 
                        className: '', // 分类
                        model: '', // 规格
                        num: '', // 数量
                        price: '', // 价格
                        addressName: '', // 地区
                        address: '', // 地址
                        description: '', // 产品详情
                    },
                    listRecommends: [],
                },
                mounted: function() {

                    // this.getProductDetail(api.pageParam.id)
                },
                methods: {
                    // 获取商品详情
                    getProductDetail: function(id) {
                        let vm = this
                        // 这里做个请求, 将返回的数据赋值
                        index.deformedSteel("getDeformedDetail")(id, function(ret) {
                            vm.detailOtherData = ret.data
                            if(ret.data.banners && ret.data.banners.length > 0){
                                ret.data.banners.forEach(item => {
                                    vm.imageUrls.push(item.imageUrl)
                                })
                            }
                            vm.$nextTick(() => {
                                vm.initSwipe()
                            })
                            vm.getRecommendsData() // 相关推荐初始化
                        })
                    },

                    // 初始化相关推荐
                    getRecommendsData: function (status) {
                        let vm = this
                        const location = vm.location.split(',')
                        const lon = location[0]
                        const lat = location[1]
                        const param = {
                            classIds: [vm.detailOtherData.classId],
                            pageNum: 1,
                            pageSize: 5,
                            status: 1 // 0:下架  1： 上架
                        }
                        index.deformedSteel("getListDeformed")(param, function (ret) {
                            vm.listRecommends = ret.data.list
                        })
                    },


                    // 初始化轮播
                    initSwipe() {
                        var mySwiper = new Swiper('.swiper-container', {
                            pagination: '.swiper-pagination',
                            // autoplay: 3000,
                            onSliderMove: function(swiper, event){
                                var curDom = document.querySelector('#player' + swiper.activeIndex)
                                if(curDom) curDom.pause()
                            }
                        })
                    },
                    
                    // 图片预览
                    toPreview(imageUrl) {
                        this.preview = true;
                        const index = this.imageUrls.findIndex(t => {
                            return t === imageUrl;
                        });
                        this.startPosition = index >= 0 ? index : 0;
                    },

                },
            })
    </script>
</body>

</html>
